<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-容器</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
    <style>
        code {
            color: rgb(169, 183, 198);
            background-color: rgb(43, 43, 43);
            padding: 5px;
            min-height: 8em;
            display: block;
            width: 100%;
            border-width: 0;
            border-radius: 5px;
            white-space: pre;
            overflow-x: auto;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="card">
    <div class="card-body">
        <!--顶部条-->
        <div style="padding: 0 7px 15px 7px" class="clearfix">
            <!--搜索输入框组-->
            <div class="input-group pull-left" style="width: 50%">
                <input id="keyword" class="form-control" type="search" placeholder="名称">
                <div class="input-group-append">
                    <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
                </div>
            </div>
            <!--新增按钮-->
            <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 创建容器</button>
        </div>
        <!--数据展示-->
        <div class="container-fluid">
            <table id="table" class="table table-sm table-hover table-bordered">
                <thead><tr>
                    <th style="min-width: 2em">#</th>
                    <th>名称</th>
                    <th>镜像</th>
                    <th style="min-width: 3em">状态</th>
                    <th style="min-width: 3em">存储</th>
                    <th style="min-width: 3em">端口</th>
                    <th style="width: 10em">创建时间</th>
                    <th style="width: 11em">操作</th>
                </tr></thead>
                <tbody><tr>
                    <td>{{index}}</td>
                    <td>{{name}}</td>
                    <td>{{image}}</td>
                    <td><span class="badge {{statusClass}}">{{statusName}}</span></td>
                    <td>{{volume}}</td>
                    <td>{{port}}</td>
                    <td>{{created}}</td>
                    <td>
                        <button class="btn btn-xs btn-outline-primary detail" data-id="{{id}}"><i class="fa fa-comment-o"></i> 详情</button>
                        <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}" {{remove}}><i class="fa fa-times"></i> 删除</button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-outline-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <i class="fa fa-list-ul"></i> 更多
                            </button>
                            <div class="dropdown-menu dropdown-menu-outline-info dropdown-menu-right">
                                <a class="dropdown-item dropdown-item-xs rename" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-pencil"></i> 重命名</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item dropdown-item-xs start {{start}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa fa-play"></i> 启动</a>
                                <a class="dropdown-item dropdown-item-xs stop {{stop}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-stop"></i> 停止</a>
                                <a class="dropdown-item dropdown-item-xs restart {{restart}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-refresh"></i> 重启</a>
                                <a class="dropdown-item dropdown-item-xs kill {{kill}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-bug"></i> 杀掉</a>
                                <a class="dropdown-item dropdown-item-xs pause {{pause}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-pause"></i> 暂停</a>
                                <a class="dropdown-item dropdown-item-xs resume {{resume}}" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-share"></i> 恢复</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item dropdown-item-xs log" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-bug"></i> 日志</a>
                                <a class="dropdown-item dropdown-item-xs stat" data-id="{{id}}" href="javascript:void(0);"><i class="fa fa-line-chart"></i> 监控</a>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--加载更多-->
        <div id="load-more" class="text-sm-center text-primary" style="display: none;">
            <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
        </div>
        <!--正在加载-->
        <div id="loading" class="text-sm-center text-gray" style="display: none;">
            <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
        </div>
        <!--全部加载-->
        <div id="load-all" class="text-sm-center text-success" style="display: none;">
            <i class="fa fa-info-circle"></i> 已加载全部数据
        </div>
        <!--加载失败-->
        <div id="load-error" class="text-sm-center text-danger" style="display: none;">
            <i class="fa fa-exclamation-triangle"></i> 加载失败
        </div>
    </div>
</div>
<!--详情-->
<div id="detail" class="side-panel right width600 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <div id="detail-info">
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12" style="word-break: break-all"><b>ID:</b> {{id}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12" style="word-break: break-all"><b>镜像:</b> {{imageName}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-6" style="word-break: break-all"><b>名称:</b> {{name}}</div>
                <div class="col-md-6"><b>创建时间:</b> {{created}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-6"><b>启动时间:</b> {{startedAt}}</div>
                <div class="col-md-6"><b>停止时间:</b> {{finishedAt}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-6"><b>主机名:</b> {{hostname}}</div>
                <div class="col-md-6"><b>用户:</b> {{user}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-6"><b>自动删除:</b>
                    <div class="d-inline-block custom-control custom-switch custom-switch-off-gray custom-switch-on-info">
                        <input type="checkbox" class="custom-control-input" id="autoremove" disabled {{autoremove}}>
                        <label class="custom-control-label" for="autoremove"></label>
                    </div>
                </div>
                <div class="col-md-6"><b>特权模式:</b>
                    <div class="d-inline-block custom-control custom-switch custom-switch-off-gray custom-switch-on-info">
                        <input type="checkbox" class="custom-control-input" id="privileged" disabled {{privileged}}>
                        <label class="custom-control-label" for="privileged"></label>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-4"><b>状态:</b> <span class="badge {{statusClass}}">{{statusName}}</span></div>
                <div class="col-md-4"><b>CPU:</b> {{cpu}}</div>
                <div class="col-md-4"><b>内存</b>:</b> {{memHumanRead}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-4"><b>重启策略:</b> {{restartPolicy}}</div>
                <div class="col-md-4"><b>最大重启次数:</b> {{maxRestartCount}}</div>
                <div class="col-md-4"><b>已重启次数</b>:</b> {{restartCount}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-4"><b>进程ID:</b> {{pid}}</div>
                <div class="col-md-4"><b>进程退出码:</b> {{exitCode}}</div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>网路配置</label>
                    <table id="network-table" class="table table-sm table-hover table-bordered">
                        <thead><tr>
                            <th>#</th>
                            <th>网络名称</th>
                            <th>IP地址</th>
                            <th>MAC地址</th>
                            <th>网关</th>
                        </tr></thead>
                        <tbody><tr>
                            <td>{{index}}</td>
                            <td>{{networkName}}</td>
                            <td>{{ipAddress}}</td>
                            <td>{{macAddress}}</td>
                            <td>{{gateway}}</td>
                        </tr></tbody>
                    </table>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>启动命令</label>
                    <textarea id="command"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>错误信息</label>
                    <textarea id="error"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>目录挂载</label>
                    <textarea id="volumes"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>端口映射</label>
                    <textarea id="ports"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>DNS</label>
                    <textarea id="dns"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>HOSTS</label>
                    <textarea id="hosts"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>环境变量</label>
                    <textarea id="env"></textarea>
                </div>
            </div>
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-12">
                    <label>标签</label>
                    <textarea id="label"></textarea>
                </div>
            </div>



        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>
<!--日志-->
<div id="log" class="side-panel right width1000 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <code class="log"></code>
        <div class="bg-white mt-3">
            <button id="log-refresh" class="btn btn-info"><i class="fa fa-refresh"></i> 刷新</button>
            <button id="log-cancel" class="btn btn-default"><i class="fa fa-times"></i> 关闭</button>
        </div>
    </div>
</div>
<!--重命名-->
<div id="rename" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="rename-id">
        <div class="form-group">
            <label for="rename-name" class="require">名称</label>
            <input type="text" class="form-control" id="rename-name" placeholder="请填写容器名称" required>
        </div>
        <div class="bg-white mt-3">
            <button id="rename-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="rename-cancel" class="btn btn-default"><i class="fa fa-times"></i> 关闭</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/shell/shell.js"></script>
<script src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
<script src="../../plugins/codemirror/addon/hint/anyword-hint.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var serverId = undefined;

    var tableCtrl = new TableCtrl(
        Url.dockerService.dockerContainerPage,
        Url.dockerService.dockerContainerDetail,
        Url.dockerService.dockerContainerCreate,
        undefined,
        Url.dockerService.dockerContainerRemove,
        function (template, record, index) {
            var statusClass = "bg-warning";
            switch (record.status) {
                case "CREATED": statusClass = "bg-info"; break;
                case "RUNNING": statusClass = "bg-success"; break;
                case "RESTARTING": statusClass = "bg-warning"; break;
                case "EXITED": statusClass = "bg-gray"; break;
                case "PAUSED": statusClass = "bg-warning"; break;
                case "DEAD": statusClass = "bg-danger"; break;
                default: statusClass = "bg-warning"; break;
            }

            // var volumeTemplate =
            //     "<span class=\"badge bg-info\">{{source}}</span> " +
            //     "<span class=\"badge bg-info\">{{destination}}</span> " +
            //     "<span class=\"badge bg-info\">{{mode}}</span> " +
            //     "<br/>";
            var volumeTemplate =
                "<span class=\"badge bg-info\">{{source}}:{{destination}}:{{mode}}</span> " +
                "<br/>";
            var volumeSummary = "";
            for (let i = 0; i < record.volumes.length; i++) {
                volumeSummary += volumeTemplate
                    .replace(new RegExp("{{source}}", "gm"), record.volumes[i].source)
                    .replace(new RegExp("{{destination}}", "gm"), record.volumes[i].destination)
                    .replace(new RegExp("{{mode}}", "gm"), record.volumes[i].mode)
            }

            // var portTemplate =
            //     "<span class=\"badge bg-info\">{{hostIp}}{{hostPort}}</span> " +
            //     "<span class=\"badge bg-info\">{{containerPort}}</span> " +
            //     "<br/>";
            var portTemplate =
                "<span class=\"badge bg-info\">{{hostIp}}{{hostPort}}:{{containerPort}}</span> " +
                "<br/>";
            var portSummary = "";
            for (let i = 0; i < record.ports.length; i++) {
                portSummary += portTemplate
                    .replace(new RegExp("{{hostIp}}", "gm"), record.ports[i].hostIp ? record.ports[i].hostIp + ":" : "")
                    .replace(new RegExp("{{hostPort}}", "gm"), record.ports[i].hostPort ? record.ports[i].hostPort : "")
                    .replace(new RegExp("{{containerPort}}", "gm"), record.ports[i].containerPort)
            }

            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{image}}", "gm"), record.imageName)
                .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                .replace(new RegExp("{{statusName}}", "gm"), record.statusValue)
                .replace(new RegExp("{{volume}}", "gm"), volumeSummary)
                .replace(new RegExp("{{port}}", "gm"), portSummary)
                .replace(new RegExp("{{created}}", "gm"), record.created)
                .replace(new RegExp("{{start}}", "gm"), record.startEnable ? "" : "disabled")
                .replace(new RegExp("{{stop}}", "gm"), record.stopEnable ? "" : "disabled")
                .replace(new RegExp("{{restart}}", "gm"), record.restartEnable ? "" : "disabled")
                .replace(new RegExp("{{kill}}", "gm"), record.killEnable ? "" : "disabled")
                .replace(new RegExp("{{pause}}", "gm"), record.pauseEnable ? "" : "disabled")
                .replace(new RegExp("{{resume}}", "gm"), record.resumeEnable ? "" : "disabled")
                .replace(new RegExp("{{remove}}", "gm"), record.removeEnable ? "" : "disabled")
        },
        function () {
            return undefined;
        }
    );
    tableCtrl.pageSize = 100000000;
    tableCtrl.extraUrlSearch = function(url) {
        return url + "&serverId=" + serverId
    };
    tableCtrl.extraUrlRemove = function (url, id) {
        return url + "?serverId=" + serverId
    }
    tableCtrl.extraUrlDetail = function (url, id) {
        return url + "?serverId=" + serverId
    }
    tableCtrl.extraBind = function() {
        var self = this;
        $("#table").on("click", ".detail", function () {
            var id = $(this).attr("data-id");
            self.showDetail(id);
        });
        $("#table").on("click", ".start", function () {
            var id = $(this).attr("data-id");
            self.dockerStart(id);
        });
        $("#table").on("click", ".stop", function () {
            var id = $(this).attr("data-id");
            self.dockerStop(id);
        });
        $("#table").on("click", ".restart", function () {
            var id = $(this).attr("data-id");
            self.dockerRestart(id);
        });
        $("#table").on("click", ".kill", function () {
            var id = $(this).attr("data-id");
            self.dockerKill(id);
        });
        $("#table").on("click", ".pause", function () {
            var id = $(this).attr("data-id");
            self.dockerPause(id);
        });
        $("#table").on("click", ".resume", function () {
            var id = $(this).attr("data-id");
            self.dockerResume(id);
        });
        $("#table").on("click", ".rename", function () {
            var id = $(this).attr("data-id");
            $("#rename-id").val(id);
            $("#rename").removeClass("hide");
        });
        $("#table").on("click", ".log", function () {
            var id = $(this).attr("data-id");
            self.dockerLogId = id;
            self.dockerLog(id);
        });
        $("#table").on("click", ".stat", function () {
            var id = $(this).attr("data-id");
            var record = self.getById(id);
            var url = "cloud/html/docker-container-stat.html?serverId=" + serverId + "&id=" + id;
            var name  = record.name + " 性能监控";

            parent.window.frameCtrl.windowCtrl.open("docker-container-stat-" + id, name, url);
        });
        $("#log-cancel").click(function () {
            self.dockerLogId = "";
           $("#log").addClass("hide");
        });
        $("#log-refresh").click(function () {
            self.dockerLog(self.dockerLogId);
        });
        $("#rename-ok").click(function () {
            self.dockerRename();
        });
        $("#rename-cancel").click(function () {
            $("#rename").addClass("hide");
        });
    }
    tableCtrl.showCreate = function () {
        var name = "创建容器";
        var url = "cloud/html/docker-container-create.html?serverId=" + serverId;
        parent.window.frameCtrl.windowCtrl.open("docker-container-create", name, url);
    }

    tableCtrl.dockerStart = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerStart.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("启动成功！");
            }
        });
    }

    tableCtrl.dockerStop = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerStop.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("正在停止容器，请稍后...");
            }
        });
    }

    tableCtrl.dockerRestart = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerRestart.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("正在重启容器，请稍后...");
            }
        });
    }

    tableCtrl.dockerKill = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerKill.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("杀掉成功！");
            }
        });
    }

    tableCtrl.dockerPause = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerPause.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("暂停成功！");
            }
        });
    }

    tableCtrl.dockerResume = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerResume.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                parent.window.frameCtrl.toastr.success("恢复成功！");
            }
        });
    }

    tableCtrl.dockerRename = function () {
        var self = this;

        $("#rename input").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });

        var id = $("#rename-id").val();
        var name = $("#rename-name").val();
        var url = Url.dockerService.dockerContainerRename.replace("{id}", id) + "?serverId=" + serverId + "&name=" + encodeURIComponent(name);
        $.ajax({
            url: url,
            type: HttpMethod.post,
            success: function (result, status, xhr) {
                $("#search").click();
                $("#rename").addClass("hide");
                parent.window.frameCtrl.toastr.success("重命名成功！");
            }
        });
    }

    tableCtrl.dockerLogId = '';
    tableCtrl.dockerLog = function (id) {
        var self = this;
        var url = Url.dockerService.dockerContainerLog.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("code.log").html("");
                for (let i = 0; i < result.length; i++) {
                    $("code.log").append(result[i] + "\r\n");
                }
                $("#log").removeClass("hide");
            }
        });
    }

    tableCtrl.detailTemplate;
    tableCtrl.detailNetworkTemplate;
    tableCtrl.getDetailTemplate = function () {
        this.detailTemplate = $("#detail-info").prop("innerHTML");
        $("#detail-info").html("");
    }
    tableCtrl.getDetailNetworkTemplate = function () {
        this.detailNetworkTemplate = $("#network-table > tbody").prop("innerHTML");
        $("#network-table > tbody").html("");
    }
    tableCtrl.showDetail = function (id) {
        var self = this;

        var url = this.detailUrl.replace("{id}", id) + "?serverId=" + serverId;
        $.ajax({
            url: url,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                var statusClass = "bg-warning";
                switch (result.status) {
                    case "CREATED": statusClass = "bg-info"; break;
                    case "RUNNING": statusClass = "bg-success"; break;
                    case "RESTARTING": statusClass = "bg-warning"; break;
                    case "EXITED": statusClass = "bg-gray"; break;
                    case "PAUSED": statusClass = "bg-warning"; break;
                    case "DEAD": statusClass = "bg-danger"; break;
                    default: statusClass = "bg-warning"; break;
                }

                var html = tableCtrl.detailTemplate
                    .replace(new RegExp("{{id}}", "gm"), result.id)
                    .replace(new RegExp("{{name}}", "gm"), result.name)
                    .replace(new RegExp("{{created}}", "gm"), result.created)
                    .replace(new RegExp("{{cpu}}", "gm"), result.cpu / 1000000000)
                    .replace(new RegExp("{{memHumanRead}}", "gm"), result.memHumanRead)
                    .replace(new RegExp("{{imageName}}", "gm"), result.imageName)
                    .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                    .replace(new RegExp("{{statusName}}", "gm"), result.statusValue)
                    .replace(new RegExp("{{restartPolicy}}", "gm"), result.restartPolicy ? result.restartPolicy.toUpperCase() : "")
                    .replace(new RegExp("{{maxRestartCount}}", "gm"), result.maxRestartCount)
                    .replace(new RegExp("{{restartCount}}", "gm"), result.restartCount)
                    .replace(new RegExp("{{pid}}", "gm"), result.pid)
                    .replace(new RegExp("{{exitCode}}", "gm"), result.exitCode)
                    .replace(new RegExp("{{error}}", "gm"), result.error ? result.error : "无")
                    .replace(new RegExp("{{autoremove}}", "gm"), result.autoRemove ? "checked" : "")
                    .replace(new RegExp("{{privileged}}", "gm"), result.privileged ? "checked" : "")
                    .replace(new RegExp("{{startedAt}}", "gm"), result.startedAt ? result.startedAt : "无")
                    .replace(new RegExp("{{finishedAt}}", "gm"), result.finishedAt ? result.finishedAt : "无")
                    .replace(new RegExp("{{hostname}}", "gm"), result.hostname ? result.hostname : "")
                    .replace(new RegExp("{{user}}", "gm"), result.user ? result.user : "")
                $("#detail-info").html(html);

                var commandArea = CodeMirror.fromTextArea(document.getElementById("command"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                commandArea.setSize("auto", "auto");
                commandArea.setValue(result.path + " " + result.args)

                var envArea = CodeMirror.fromTextArea(document.getElementById("env"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                envArea.setSize("auto", "auto");
                if (result.env) {
                    var envText = "";
                    for (let i = 0; i < result.env.length; i++) {
                        envText = envText + result.env[i];
                        if (i < result.env.length - 1) {
                            envText = envText + "\r\n";
                        }
                    }
                    envArea.setValue(envText)
                }

                var labelArea = CodeMirror.fromTextArea(document.getElementById("label"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                labelArea.setSize("auto", "auto");
                if (result.label) {
                    var labelText = "";
                    var labelCount = 0
                    for (let key in result.label) {
                        labelCount = labelCount + 1;
                        labelText = labelText + key + ":" + result.label[key];
                        if (labelCount < Object.keys(result.label).length) {
                            labelText = labelText + "\r\n";
                        }
                    }
                    labelArea.setValue(labelText)
                }

                var volumesArea = CodeMirror.fromTextArea(document.getElementById("volumes"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                volumesArea.setSize("auto", "auto");
                if (result.volumes) {
                    var volumeText = "";
                    for (let i = 0; i < result.volumes.length; i++) {
                        volumeText = volumeText +
                            result.volumes[i].source + ":" +
                            result.volumes[i].destination + ":" +
                            result.volumes[i].mode;
                        if (i < result.env.length - 1) {
                            volumeText = volumeText + "\r\n";
                        }
                    }
                    volumesArea.setValue(volumeText)
                }

                var portArea = CodeMirror.fromTextArea(document.getElementById("ports"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                portArea.setSize("auto", "auto");
                if (result.ports) {
                    var portText = "";
                    for (let i = 0; i < result.ports.length; i++) {
                        if (result.ports[i].hostIp) {
                            portText = portText +
                                result.ports[i].hostIp + ":" +
                                result.ports[i].hostPort + ":" +
                                result.ports[i].containerPort;
                        } else {
                            portText = portText +
                                result.ports[i].hostPort + ":" +
                                result.ports[i].containerPort;
                        }
                        if (i < result.env.length - 1) {
                            portText = portText + "\r\n";
                        }
                    }
                    portArea.setValue(portText)
                }

                var errorArea = CodeMirror.fromTextArea(document.getElementById("error"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                errorArea.setSize("auto", "auto");
                errorArea.setValue(result.error)

                $("#network-table > tbody").html("");
                if (result.networks) {
                    for (let i = 0; i < result.networks.length; i++) {
                        var html = self.detailNetworkTemplate
                            .replace(new RegExp("{{index}}", "gm"), i + 1)
                            .replace(new RegExp("{{networkName}}", "gm"), result.networks[i].networkName)
                            .replace(new RegExp("{{ipAddress}}", "gm"), result.networks[i].ipAddress)
                            .replace(new RegExp("{{macAddress}}", "gm"), result.networks[i].macAddress)
                            .replace(new RegExp("{{gateway}}", "gm"), result.networks[i].gateway);
                        $("#network-table > tbody").append(html);
                    }
                }

                var dnsArea = CodeMirror.fromTextArea(document.getElementById("dns"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                dnsArea.setSize("auto", "auto");
                if (result.dns) {
                    var dnsText = "";
                    for (let i = 0; i < result.dns.length; i++) {
                        dnsText = dnsText + result.dns[i];
                        if (i < result.dns.length - 1) {
                            dnsText = dnsText + "\r\n";
                        }
                    }
                    dnsArea.setValue(dnsText)
                }

                var hostsArea = CodeMirror.fromTextArea(document.getElementById("hosts"), {
                    mode: "text/x-sh", theme: "darcula", readOnly: true
                });
                hostsArea.setSize("auto", "auto");
                if (result.hosts) {
                    var hostsText = "";
                    for (let i = 0; i < result.hosts.length; i++) {
                        hostsText = hostsText + result.hosts[i];
                        if (i < result.hosts.length - 1) {
                            hostsText = hostsText + "\r\n";
                        }
                    }
                    hostsArea.setValue(hostsText)
                }

                $("#detail").removeClass("hide");
            }
        })
    }

    tableCtrl.getTemplate();
    tableCtrl.getDetailNetworkTemplate();
    tableCtrl.getDetailTemplate();
    tableCtrl.bindEvent();

    var onWebSocketEvent = function (event) {
        if (event.type === "DOCKER_CONTAINER_REFRESH") {
            tableCtrl.pageNumber = 0;
            tableCtrl.records = [];
            tableCtrl.getRecords();
        }
    };
    onWebSocketEvent.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(onWebSocketEvent);

    var onWindowActive = function () {
        parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name", serverId);
    }
    onWindowActive.owner = window.location.href;
    parent.window.frameCtrl.windowCtrl.tabChangeListers.push(onWindowActive);

    var onTitleSelectChange = function (value) {
        serverId = value;
        tableCtrl.pageNumber = 0;
        tableCtrl.records = [];
        tableCtrl.getRecords();
    }
    onTitleSelectChange.owner = window.location.href;
    parent.window.frameCtrl.titleSelectCtrl.listeners.push(onTitleSelectChange);

    parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name");
</script>

</body>
</html>